import React from 'react';

class ReactRouterDetail extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            list: [
                {name: '跑步五公里', id: 123},
                {name: '代码写两千行', id: 456},
                {name: '学习React源码', id: 789},
            ],
            currentObj: {},
        }
    }

    componentDidMount(){
        //编程式导航重定向
        //this.props.history.push('/redirect/home123')

        this.setState({
            currentObj: this.state.list.find(item => item.id == this.props.match.params.id)
        },function(){
            console.log(this.state.currentObj)
        })
    }
    render(){
        return (
            <div>
                {/* 声明式导航重定向：从某个路由跳转过来后再重新定向到新的路由 */}
                {/* <Redirect to={'/redirect/home123'}></Redirect> */}
                接收到的id：{this.props.match.params.id}
                <div>
                    当前的详情数据为：{this.state.currentObj.name}
                </div>
            </div>
        )
    }
}

export default ReactRouterDetail